<template>
  <div class="home">
    <div class="upload">
      <el-upload class="upload-demo" :headers="headers" ref="upload" action="http://localhost:3000/uploadImage"
        :on-change="handleChange" accept="image/*" :file-list="fileList" :auto-upload="false" multiple>
        <el-button slot="trigger" size="big" type="primary">选择图片</el-button>
        <el-button style="margin-left: 10px;" size="big" type="primary" @click="submitUpload">提交</el-button>
      </el-upload>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      fileList: [],
      headers: {
        Authorization: localStorage["token"]
      }
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
      window.location.reload();
    },
    handleChange(file, fileList) {
      // console.log(file);
      // console.log(fileList);
    }
  }
}

</script>
<style>
.home {
  display: flex;
  justify-content: space-between;
  /* height: 550px; */
  align-items: center;
  font-size: 18px;
}

.upload {
  width: 100%;
  height: 100%;
  /* margin-left: 250px; */
  border: 3px dashed #ccc;
}

.upload-demo {
  text-align: center;
  margin: 100px auto;
}
</style>
